@import "../../global";
// 混合
.steps-icon(@color, @img, @site: 0) {
  .steps span {
    .StepsIcon(4);
  }

  .steps-hr .this {
    left: @site;
  }
}

//循环
.StepsIcon(@i) when (@i > 0) {
  &:nth-child(@{i}) {
    color: extract(@color, @i);

    &::before {
      .backgroundcard(extract(@img, @i));
    }
  }

  .StepsIcon(@i - 1);
}

.backgroundcard(@img) {
  background: url("../../assets/@{img}.png") no-repeat center;
  background-size: cover;
}


.steps-content {
  margin-top: 30px;
}

.steps-action {
  .ant-btn {
    margin-top: 36px;
    height: 45px;
    width: 200px;
    font-size: 16px;
    font-weight: bold;
    color: #737373;
    background-color: #e5e5e5;
  }

  .ant-btn-primary {
    color: white;
    background-color: #38a2ec;
  }

  // .ant-btn-primary {
  //   color: #737373;
  //   background-color: #E5E5E5;
  // }
}

// 容器
.cont {
  padding-top: 40px;
}

// 步骤条
.header-steps {
  .steps {
    span {
      position: relative;
      display: inline-block;
      text-align: center;
      padding-bottom: 18px;
      width: 25%;
      color: @font-color;
      #font(17px);

      &:nth-child(1)::before,
      &:nth-child(2)::before,
      &:nth-child(3)::before,
      &:nth-child(4)::before {
        content: "";
        position: absolute;
        right: 50%;
        bottom: -20px;
        height: 30px;
        width: 30px;
        transform: translateX(50%);
        z-index: 2;
      }
    }
  }

  .steps-hr {
    height: 10px;
    border-radius: 10px;
    background-color: #becede;
    overflow: hidden;

    .this {
      position: relative;
      display: block;
      left: 0;
      width: 25%;
      height: 10px;
      border-radius: 10px;
      background: url("../../assets/steps.jpg");
      background-size: cover;
      transition: left 0.2s;
    }
  }

  // 切换效果
  &.one {
    @color: @blue,
    @font-color,
    @font-color,
    @font-color;

    @img: "one-a",
    "two",
    "three",
    "four";
    .steps-icon(@color, @img, 0)
  }

  &.two {
    @color: @font-color,
    @blue,
    @font-color,
    @font-color;

    @img: "one",
    "two-a",
    "three",
    "four";
    .steps-icon(@color, @img, 25%)
  }

  &.three {
    @color: @font-color,
    @font-color,
    @blue,
    @font-color;

    @img: "one",
    "two",
    "three-a",
    "four";
    .steps-icon(@color, @img, 50%)
  }

  &.four {
    @color: @font-color,
    @font-color,
    @font-color,
    @blue;

    @img: "one",
    "two",
    "three",
    "four-a";
    .steps-icon(@color, @img, 75%)
  }
}
